<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <div style="padding: 10px;">目标表格</div>
    <table border="1">
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
                <th>第四列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">[1,1-2]</td>
                <td>[1, 3]</td>
                <td>[1, 4]</td>
            </tr>
            <tr>
                <td rowspan="2">[2-3,1]</td>
                <td>[2, 2]</td>
                <td>[2, 3]</td>
                <td>[2, 4]</td>
            </tr>
            <tr>
                <td>[3, 2]</td>
                <td>[3, 3]</td>
                <td>[3, 4]</td>
            </tr>
            <tr>
                <td colspan="3" rowspan="2">[4, 1]</td>
                <td>[4, 4]</td>
            </tr>
            <tr>
                <td>[5, 4]</td>
            </tr>
        </tbody>
    </table>
    <div style="padding: 10px;">JS操作</div>
    <table id="table" border="1">
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
                <th>第四列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>[1, 1]</td>
                <td>[1, 2]</td>
                <td>[1, 3]</td>
                <td>[1, 4]</td>
            </tr>
            <tr>
                <td>[2, 1]</td>
                <td>[2, 2]</td>
                <td>[2, 3]</td>
                <td>[2, 4]</td>
            </tr>
            <tr>
                <td>[3, 1]</td>
                <td>[3, 2]</td>
                <td>[3, 3]</td>
                <td>[3, 4]</td>
            </tr>
            <tr>
                <td>[4, 1]</td>
                <td>[4, 2]</td>
                <td>[4, 3]</td>
                <td>[4, 4]</td>
            </tr>
            <tr>
                <td>[5, 1]</td>
                <td>[5, 2]</td>
                <td>[5, 3]</td>
                <td>[5, 4]</td>
            </tr>
        </tbody>
    </table>
    <!-- <div style="padding: 10px;">对相同内容表格进入合并</div>
    <table id="data-table" border="1">
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
                <th>第四列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>[1, 1]</td>
                <td>[1, 2]</td>
                <td>[1, 3]</td>
                <td>[1, 4]</td>
            </tr>
            <tr>
                <td>[2, 1]</td>
                <td>[2, 2]</td>
                <td>[2, 3]</td>
                <td>[2, 4]</td>
            </tr>
            <tr>
                <td>[3, 1]</td>
                <td>[3, 2]</td>
                <td>[3, 3]</td>
                <td>[3, 4]</td>
            </tr>
            <tr>
                <td>[4, 1]</td>
                <td>[4, 2]</td>
                <td>[4, 3]</td>
                <td>[4, 4]</td>
            </tr>
        </tbody>
    </table> -->
    <script>
        /**
         * 合并单元格算法
         * options = {
         *   beginRow: 1,
         *   endRow: 2,
         *   beginCol: 1,
         *   endCol: 2
        */
        var tableCollapsed = (table, options) => {
            options = Object.assign({
                beginRow: 0,
                endRow: table.rows.length - 1,
                beginCol: 0,
                endCol: table.rows[table.rows.length-1].cells.length - 1
            }, options);
            let { beginRow, endRow, beginCol, endCol } = options;
            if(endRow < 0) {
                endRow = table.rows.length + endRow;
            }
            if(endCol < 0) {
                endCol = table.rows[table.rows.length-1].cells.length + endCol;
            }
            // 删除单元格
            for(let i = beginRow; i <= endRow; i++) {
                const row = table.rows[i];
                let effectBeginCol = beginCol;
                if(i == beginRow) {
                    effectBeginCol = beginCol + 1;
                }
                for(let j = effectBeginCol; j <= endCol; j++) {
                    const cell = row.cells[j];
                    row.deleteCell(cell);
                }
                // 如果<tr>没有td，则删除tr
                if(row.cells.length == 0) {
                    table.deleteRow(i);
                }
            }
            const firstRow = table.rows[beginRow];
            // 设置colspan属性
            firstRow.cells[beginCol].colSpan = endCol - beginCol + 1;
            // 设置rowspan属性
            endRow != beginRow && (firstRow.cells[beginCol].rowSpan = endRow - beginRow + 1)
        }
        tableCollapsed(document.querySelector('#table'), {
            beginRow: 1,
            endRow: 1,
            beginCol: 0,
            endCol: 1
        });
        tableCollapsed(document.querySelector('#table'), {
            beginRow: 2,
            endRow: 3,
            beginCol: 0,
            endCol: 0
        });
        tableCollapsed(document.querySelector('#table'), {
            beginRow: 4,
            endRow: -1,
            beginCol: 0,
            endCol: -2 // -2表示倒入最后第二列
        });
    </script>
</body>
</html>